/**
 * Descriptions：
 * <p>
 * Author：ChenME
 * Date：2017/6/29
 * Email：ibelieve1210@163.com
 */

import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
} from 'react-native';

import Dimensions from 'Dimensions';
var {width} =Dimensions.get('window');

import MidCommView from './CMEMidCommView';

import TopMidData from '../../../LocalData/HomeTopMiddleLeft.json';

export default class HomeMidView extends Component {
    render() {
        return (
            <View style={styles.midViewStyle}>
                {this.renderLeftView()}
                <View >
                    {this.renderRightView()}
                </View>
            </View>
        );
    }

    renderLeftView() {
        var data = TopMidData.dataLeft[0];
        return (
            <TouchableOpacity activeOpacity={0.7}>
                <View style={styles.midLeftViewStyle}>
                    <Image source={{uri: data.img1}} style={styles.leftIconStyleTop}/>
                    <Image source={{uri: data.img2}} style={styles.leftIconStyleBottom}/>
                    <Text style={{color: 'gray'}}>{data.title}</Text>
                    <View style={styles.priceViewStyle}>
                        <Text style={{color: 'green', marginRight: 4, marginBottom: 4}}>{data.price}</Text>
                        <Text style={{backgroundColor: 'yellow', color: 'orange'}}>{data.sale}</Text>
                    </View>
                </View>
            </TouchableOpacity>
        );
    }

    renderRightView() {
        let itemArr = [];
        let rightDataArr = TopMidData.dataRight;
        for (let i = 0; i < rightDataArr.length; i++) {
            let data = rightDataArr[i];
            itemArr.push(
                <MidCommView
                    key={i}
                    title={data.title}
                    subTitle={data.subTitle}
                    titleColor={data.titleColor}
                    iconName={data.rightImage}
                />
            );
        }
        return itemArr;
    }
}

const styles = StyleSheet.create({
    midViewStyle: {
        marginTop: 15,
        flexDirection: 'row',
        justifyContent: 'space-between',
    },

    midLeftViewStyle: {
        backgroundColor: '#fff',
        height: 119,
        width: width / 2 - 0.5,
        justifyContent: 'center',
        alignItems: 'center',
    },

    priceViewStyle: {
        flexDirection: 'row',
    },

    leftIconStyleTop: {
        width: 64,
        height: 28,
        resizeMode: 'contain',
    },

    leftIconStyleBottom: {
        width: 64,
        height: 43,
        resizeMode: 'contain',
    },
});